<template >
	<div class="contain" >
		<div class="contain-header">
			<el-breadcrumb  separator="/">
				<el-breadcrumb-item>基础信息</el-breadcrumb-item>
				<el-breadcrumb-item>系统首页</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="system-body">
			<div class="body-lt">
				<div class="lt-nav">
					<div class="nav-title">
						<img  src = "../assets/images/line.png" >
						<p>EPR快捷入口</p>
					</div>
					<div class="nav-box">
						<div class="box-set" @click="$router.push('/deliveryManagement')">
							<img src = "../assets/images/fahuo.png" alt = "" >
							商品发货
						</div>
						<div class="box-set" @click="$router.push('/productList')">
							<img src = "../assets/images/shangping.png" alt = "" >
							商品列表
						</div>
						<div class="box-set" @click="$router.push('/orderReport')">
							<img src = "../assets/images/weituo.png" alt = "" >
							委托寄件
						</div>
						<div class="box-set" @click="$router.push('/mailingList')">
							<img src = "../assets/images/jijian.png" alt = "" >
							寄件列表
						</div>
						<div class="box-set" @click="$router.push('/warehousingManagement')">
							<img src = "../assets/images/ruku.png" alt = "" >
							商品入库
						</div>
						<div class="box-set" @click="$router.push('/issueManagement')">
							<img src = "../assets/images/chuku.png" alt = "" >
							商品出库
						</div>
					</div>
				</div>
				<div class="lt-body">
					<div class="body-box">
						<div class="box-title">
							<img  src = "../assets/images/line.png" >
							<p>待处理事务</p>
						</div>
						<div class="box-content">
							<div class="content-title" @click="$router.push('/orderReport')">
								待委托寄件订单 <i>({{taskData.waitSend}})</i>
							</div>
							<div class="content-title" @click="$router.push('/deliveryManagement')">
								待拣货商品 <i>({{taskData.waitPicking}})</i>
							</div>
							<div class="content-title" @click="$router.push('/warehousingManagement')">
								待审核入库 <i>({{taskData.waitAuditPutStorage}})</i>
							</div>
							<div class="content-title" @click="$router.push('/issueManagement')">
								待审核出库 <i>({{taskData.waitAuditOutbound}})</i>
							</div>
							<div class="content-title">
								其他事项 <i>(0)</i>
							</div>
						</div>
					</div>
					<div class="body-box">
						<div class="box-title">
							<img  src = "../assets/images/line.png" >
							<p>日程管理</p>
						</div>
						<div class="box-content">
							<div class="content-title" style="color: red">
								暂无
							</div>
						</div>
					</div>
				</div>
				<div class="lt-footer">
					<div class="footer-title">
						<img  src = "../assets/images/line.png" >
						<p>订单统计</p>
					</div>
					<div class="footer-box">
						<p>本月订单数为<i>20</i>,相比上月增长<i>30%</i></p>
						<p>本月订单数为<i>20</i>,相比上月增长<i>30%</i></p>
					</div>
				</div>
			</div>
			<div class="body-rt">
				<div class="rt-top">
					<div class="top-title">
						<img  src = "../assets/images/line.png" >
						<p>公司公告</p>
					</div>
					<div class="top-box">
						<div class="box-notice">2023年春节放假通知</div>
						<div class="box-notice">2023年春节放假通知</div>
						<div class="box-notice">2023年春节放假通知</div>
						<div class="box-notice">2023年春节放假通知</div>
					</div>
				</div>
				<div class="rt-down">
					<div class="down-title">
						<img  src = "../assets/images/line.png" >
						<p>热门分类</p>
					</div>
					<div class="down-box" id="transverse" >
					</div>
				</div>
			</div>
		</div>
	</div>
</template >

<script >
	import { homeTask } from "../api/homeModules";
    import * as echarts from 'echarts'
    export default {
        name: "systemHome",
		data(){
            return{
                taskData:{}
			}
		},
		mounted() {
            this.getData()
			this.initTransverse()
        },
        methods:{
            //获取首页任务
            async getData(){
                const { data } = await homeTask()
				if (data.code === 200) {
				    this.taskData = data.data
				}
			},
            // 横向柱状图
            initTransverse () {
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    // legend: {},
                    grid: {
                        top: '15%',
                        left: '10%',
                        right: '10%',
                        bottom: '15%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        // type: 'category',
                        data: ['其他', '眼镜', '男装','女装','女包',  ]
                    },
                    series: [
                        {
                            // name: '000',
                            type: 'bar',
                            data: [8,10,15,27,40],
                            itemStyle: {
                                normal: {
                                    //这里是颜色
                                    color: function(params) {
                                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                        let colorList = ['#f16f6e','#926dde', '#1abc9c', '#33ccff', '#ccff99'];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            }
                        },
                       
                    ]
                   
                }
                const myChart = echarts.init(document.getElementById('transverse'))// 图标初始化
                myChart.setOption(option)// 渲染页面
                //  随着屏幕大小调节图表
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            }
		}
    }
</script >

<style scoped lang="less">
	@import "../assets/styles/system";
</style >
